<template>
	<view>
		<u-navbar title="今夜特价" back-icon-color="#000" title-color="#000" :immersive="false" :border-bottom="false"
			:background="{background:'none'}"></u-navbar>
		<view class="m-card">
			<view class="m-head">
				<view class="m-head-box m-head-area" @click="to_link('/pages/addressList/addressList')">
					<view class="m-head-area__text u-line-1">
						<text>{{vuexCity}}</text>
					</view>
					<image src="../static/dropdown.png" mode=""></image>
				</view>
				<view class="m-head-box m-head-date">
					<view class="m-head-date__text">
						<text>{{sliceDate(vuexStartDateObj.dateStr)}}住</text>
						<text class="u-m-l-20">{{sliceDate(vuexEndDateObj.dateStr)}}离</text>
					</view>
					<!-- <image src="../static/dropdown.png" mode=""></image> -->
				</view>
			</view>
			<view class="m-list">
				<view class="m-item" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
					<view class="m-item-img">
						<image :src="item.img" mode="aspectFill">
						</image>
					</view>
					<view class="m-item-con">
						<view class="">
							<text class="m-item-font1 u-line-2">{{item.title}}</text>
						</view>
						<view class="u-m-t-6">
							<text class="m-item-font4 u-m-l-10">{{item.star}}分</text>
							<text class="m-item-font2 u-m-l-20">{{item.comment_num}}条评论</text>
						</view>
						<view class="m-item-font5 u-m-t-10">
							<text class="u-m-r-10">{{item.distance}}</text>
							<view class="m-item-tag__item" v-for="(val,key) in item.landmark" :key="key">
								<image v-if="val.originalPic" :src="val.originalPic" mode=""></image>
								<text>{{val.title}}</text>
							</view>
							<!-- <text>{{getTipComputed(item)}}</text> -->
						</view>
						<view class="u-m-t-12" style="display: flex;flex-wrap: wrap;">
							<text class="m-item-tip1" v-for="(val,key) in item.tags" :key="key">{{val}}</text>
						</view>
						<!-- <view class="u-flex u-p-t-15">
								<view class="m-item-comment u-line-1">
									<text>晚上站在阳台看夜景很不错</text>
								</view>
							</view> -->
						<view class="m-item-con-bottom">
							<view class="m-item-con-bottom-left">
								<text></text>
							</view>
							<view class="m-item-con-bottom-right">
								<text>{{item.offer_price}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="u-p-t-80 u-p-b-80 m-empty" v-if="list.length == 0 && loadStatus =='noMore'">
					<image src="/static/index/hotel-empty.png" mode=""></image>
					<text>当前区域暂无酒店</text>
					<!-- <u-empty text="当前区域暂无酒店" mode="search"></u-empty> -->
				</view>
				<uni-load-more v-else :status="loadStatus"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sliceDate,
		get_timestamp
	} from "@/common/function/tools.js"
	export default {
		data() {
			return {
				currentAreaTem:{},
				currentArea: {},
				defaultArea:{id:-999},
				
				order_sup:2,
				page: 1,
				pagenum: 10,
				loadStatus: 'loading',
				list: [],
				keyword: '', //搜索关键字
			}
		},
		computed: {
			getAddressComputed() {
				return (address) => {
					return address.slice(2)
				}
			},
			getTipComputed() {
				return (item) => {
					return item.landmark.map(val => val.title).join(' | ')
				}
			},
			checkSelectedComputed(){
				return (item)=>{
					let res = this.otherInfoTem.find(val=>{
						return val.id == item.id
					})
					return res ? true  : false
				}
			},
		},
		onReachBottom() {
			if(this.loadStatus == 'more'){
				this.getHotelList()
			}
		},
		onLoad() {
			uni.$on('resetListFun', () => {
				this.page = 1
				this.list = []
				this.getAreaListFun()
			})
			this.getAreaListFun()
		},
		onUnload() {
			uni.$off('resetListFun')
		},
		methods: {
			sliceDate,
			//获取县区列表
			getAreaListFun() {
				this.$http.getJson('hotal_channel',{parentId:0}).then(res=>{
					if(res.code == 1){
						let list = res.data
						let city = this.vuexCity.replace('市','')
						let item = list.find(item=>item.title.indexOf(city) > -1)
						if(item){
							this.areaList = item.channels
						}
						this.currentArea = {id:item && item.id || -999}
						this.defaultArea = {id:item && item.id || -999}
						
						this.getHotelList()
						
					}
				})
			},
			getHotelList() {
				let {
					lng,
					lat
				} = this.vuexLocation;
				this.loadStatus = 'loading'
				
				let params = {
					longitude: lng,
					latitude: lat,
					channel_id: this.currentArea.id || '',
					
					startTime: this.vuexStartDateObj.dateStr,
					endTime: this.vuexEndDateObj.dateStr,
					order_sup: this.order_sup,
					
					page: this.page,
					pagenum: this.pagenum
				}
			
				this.$http.getJson('hotal_nightList', params).then(res => {
					if (res.code == 1) {
						let data = res.data.list || []
						let len = data.length
						if (len > 0) {
							this.list = this.list.concat(data)
						}
						if (len == this.limit) {
							this.loadStatus = 'more'
							this.page += 1
						} else {
							this.loadStatus = 'noMore'
						}
					}else{
						this.$m.msg(res.message)
					}
				})
			
			},
			//跳转到详情页
			toDetail(id) {
				wx.navigateTo({
					url: '/pages/list/detail?id=' + id + '&startDate=' + this.vuexStartDateObj.dateStr +
						'&endDate=' + this.vuexEndDateObj.dateStr+'&order_sup='+this.order_sup,
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		background-image: url("../static/tejia-bg.png");
		background-repeat: no-repeat;
		background-size: 750rpx 496rpx;
	}
	
	.m-card{
		width: 702rpx;
		background: #FFFFFF;
		box-shadow: 0px -4rpx 10rpx 1px rgba(0,0,0,0.06);
		border-radius: 20rpx;	
		margin-left: 24rpx;
		margin-top: 150rpx;
	}
	
	.m-head{
		display: flex;
		padding: 34rpx 20rpx 0;
		.m-head-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			width: 186rpx;
			height: 60rpx;
			background: #F7F6F4;
			
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.m-head-area{
			.m-head-area__text{
				font-size: 24rpx;
				color: #33302D;
				max-width: 140rpx;
			}
		}
		.m-head-date{
			flex: 1;
			margin-left: 10rpx;
			.m-head-date__text{
				font-size: 24rpx;
				color: #76706B;
			}
		}
	}

	.m-list {
		display: flex;
		flex-direction: column;
		padding: 30rpx 20rpx 1px;

		.m-item {
			display: flex;
			padding: 0 0rpx 20rpx 0rpx;
			border-bottom: 1px solid #E6E2DE;
			margin-bottom: 20rpx;

			.m-item-font1 {
				font-size: 30rpx;
				color: #33302D;
				font-weight: 800;
				line-height: 42rpx;
			}

			.m-item-font2 {
				font-size: 24rpx;
				color: #717886;
			}

			.m-item-font3 {
				font-size: 34rpx;
				color: #fa3534;
				font-weight: 800;
			}

			.m-item-font4 {
				font-size: 36rpx;
				color: #D3A358;
				font-weight: 500;
			}

			.m-item-font5 {
				display: flex;
				flex-wrap: wrap;
				font-size: 24rpx;
				color: #33302D;
				line-height: 33rpx;

				.m-item-tag__item {
					display: flex;
					align-items: center;
					margin-right: 10rpx;
					margin-bottom: 10rpx;

					image {
						flex-shrink: 0;
						width: 33rpx;
						height: 33rpx;
						margin-right: 4rpx;
					}
				}
			}

			.m-item-tip1 {
				font-size: 18rpx;
				color: #8F6F4C;
				border: 1rpx solid #D3CEC9;
				padding: 4rpx;
				margin-right: 10rpx;
				margin-bottom: 5rpx;
			}

			.m-item-tip2 {
				font-size: 18rpx;
				color: #ff9900;
				border: 1rpx solid #ff9900;
				padding: 4rpx;
				margin-right: 10rpx;
			}

			.m-item-tip3 {
				font-size: 18rpx;
				color: #19be6b;
				border: 1rpx solid #19be6b;
				padding: 4rpx;
				margin-right: 10rpx;
			}

			.m-item-tip4 {
				font-size: 18rpx;
				color: #2979ff;
				border: 1rpx solid #2979ff;
				padding: 4rpx;
				margin-right: 10rpx;
			}

			.m-item-comment {
				max-width: 450rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: #F6F7FB;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				padding: 0 12rpx;
				font-size: 22rpx;
				color: #33302D;
			}

			.m-item-img {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 220rpx;
				height: 346rpx;

				image {
					width: 100%;
					border-radius: 10rpx;
				}
			}

			.m-item-con {
				position: relative;
				width: 410rpx;
				margin-left: 20rpx;

				.m-item-con-bottom {
					display: flex;
					justify-content: space-between;
					// position: absolute;
					// bottom: 0;
					width: 410rpx;
					margin-top: 20rpx;

					.m-item-con-bottom-right {
						font-size: 36rpx;
						color: #DE2C38;
						font-weight: 400;

						&::before {
							content: '￥';
							color: #e44c4c;
							font-size: 24rpx;
							font-weight: 400;
						}

						&::after {
							content: '起';
							font-size: 24rpx;
							font-weight: 400;
							color: #999;
						}
					}
				}
			}
		}
	}
	.m-empty{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #ADAAA5;
		text-align: center;
		padding-top: 200rpx;
		image{
			width: 320rpx;
			height: 260rpx;
			margin-bottom: 15rpx;
		}
	}
</style>